<template>
  <div>
    <div class="data_select_style">
      <span class="data_select_font_style">请选择时间</span>
      <el-date-picker
       @change="changeDate"
        v-model="nowDate"
        type="date"
        placeholder="请选择日期"
        size="default"
      />
    </div>
    <el-table :data="tableData" :height="browserHeight" style="z-index: 2">
      <el-table-column prop="deliverDate" label="日期" width="180" />
      <el-table-column prop="deliverTime" label="时间" width="180" />
      <el-table-column label="送货清单" align="center">
        <template v-slot="{ row }">
          <el-image
           :src="picUrl(row.logstic)"
            alt="Image"
            preview-teleported="true"
            :zoom-rate="1.2"
            :max-scale="7"
            :min-scale="0.2"
            fit="cover"
            style="width: 100px; height: 100px"
            :preview-src-list="getPreviewSrcList(row.qingdan)"
          />
        </template>
      </el-table-column>
      <el-table-column label="物流单" align="center">
        <template v-slot="{ row }">
          <el-image
            :src="picUrl(row.logstic)"
            preview-teleported="true"
            alt="Image"
            z-index="99"
            :zoom-rate="1.2"
            :max-scale="7"
            :min-scale="0.2"
            fit="cover"
            style="width: 100px; height: 100px"
            :preview-src-list="getPreviewSrcList(row.logstic)"
          />
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script lang="ts">
import { onMounted, ref, defineComponent, watch } from "vue";
import commonst from '@/util/Const.js';
import { apiPost } from "@/util/request.js";
import { format } from 'date-fns';
export default defineComponent({
  props: {
    pageIndex: String,
  },
  setup(props, context) {
    const getPreviewSrcList = (imageUrl: string) => {
      return [commonst.picServerUrl+imageUrl];
    };
    const picUrl=(imageUrl: string) => {
      return commonst.picServerUrl+imageUrl;
    };
   watch (() => props.pageIndex, (newValue, oldValue) => {
      console.log(`count 变化：${oldValue} => ${newValue}`);
       requestDate(false);
    });
    var browserHeight = window.innerHeight;
    browserHeight -= 226;
    const nowDate = ref("");
    var tableData = ref([]);
    const requestDate=async (isuppgAndtotal:boolean)=>{
      var formattedDate="";
      if(nowDate.value!=null && nowDate.value!=''){
         formattedDate = format(new Date(nowDate.value), 'yyyy-MM-dd');
      }
      const data = {
            pageNum: props.pageIndex,
            pageSize: 10,
            deliverDate:formattedDate
          };
          const result = await apiPost("/api/client/deiver/findByOpenid", data);
          if (result.success) {
            const data = result.data;
            if (data != null) {
              tableData.value = data.records;
              if(isuppgAndtotal){
              const tital = data.total;
              const pages = data.pages;
              context.emit("uppgAndtotal", pages, tital);
              }
            
            }
          }
    };
    const changeDate = ()=>{
        requestDate(true);
    };
    onMounted(() => {
    requestDate(true);
    });
    return { nowDate, tableData, browserHeight, getPreviewSrcList,picUrl,changeDate};
  },
});
</script>

<style lang="less" scoped>
.data_select_style {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  height: 65px;
  border-bottom: 1px solid #dcdcdc;
}
.data_select_font_style {
  font-size: 15px;
  margin-right: 16px;
}
</style>
